import FirstTitle from "@/components/FirstTitle";
import SubTitle from "@/components/subTitle";
import EffectContainer from "@/components/effectContainer";
import Code from "@/components/code";

import * as echarts from "echarts";
import "echarts-gl";
import { useEffect, useRef, useState } from "react";
import { getCode } from "@/api/codeApi.ts";
import { Description } from "@/components/description";

export const LineChart3d = () => {
  const chartRef: any = useRef<HTMLDivElement>(null);
  const data1 = [
    [0, 0, 150],
    [1, 0, 120],
    [2, 0, 200],
    [3, 0, 240],
    [4, 0, 300],
  ];

  const data2 = [
    [0, 1, 100],
    [1, 1, 80],
    [2, 1, 160],
    [3, 1, 200],
    [4, 1, 260],
  ];

  const option = {
    tooltip: {},
    xAxis3D: {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五"],
      axisLine: {
        lineStyle: {
          color: "#fff", // X 轴线颜色
          width: 1, // 线宽
          type: "solid", // 线型
        },
      },
    },
    yAxis3D: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff", // X 轴线颜色
          width: 1, // 线宽
          type: "solid", // 线型
        },
      },
    },
    zAxis3D: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff", // X 轴线颜色
          width: 1, // 线宽
          type: "solid", // 线型
        },
      },
    },
    grid3D: {
      boxWidth: 200,
      boxDepth: 80,
      viewControl: {
        // 3D 控制视角
        alpha: 30,
        beta: 20,
        distance: 250,
        rotateSensitivity: [1, 1],
        zoomSensitivity: 1,
        panSensitivity: 1,
        autoRotate: false,
      },
      light: {
        main: {
          intensity: 1.2,
        },
        ambient: {
          intensity: 1,
        },
      },
      axisPointer: {
        lineStyle: {
          color: "#00bbff", // 设置背景线的颜色
          width: 1, // 线宽
          type: "solid", // 线型
        },
      },
    },
    series: [
      {
        type: "line3D",
        data: data1,
        lineStyle: {
          width: 4,
          color: "#1E90FF",
        },
      },
      {
        type: "line3D",
        data: data2,
        lineStyle: {
          width: 4,
          color: "#32CD32",
        },
      },
      {
        type: "surface",
        wireframe: {
          show: false,
        },
        itemStyle: {
          color: "rgba(0, 255, 0, 0.5)",
          opacity: 0.8,
        },
        data: [
          data1.map((item, idx) => {
            return { value: [item[0], 0, item[2]] };
          }),
          data2.map((item, idx) => {
            return { value: [item[0], 1, item[2]] };
          }),
        ],
      },
    ],
  };
  useEffect(() => {
    let myChart: echarts.ECharts;
    // 监听窗口大小变化，调整图表大小
    const handleResize = () => {
      if (myChart) {
        myChart.resize();
      }
    };
    setTimeout(() => {
      if (chartRef.current) {
        if (myChart != null) {
          myChart.dispose();
        }
        myChart = echarts.init(chartRef.current);
        myChart.setOption(option);
      }
    }, 30);

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
      myChart.dispose();
    };
  }, []);
  const [code, setCode] = useState("");
  useEffect(() => {
    getCode("/lineChart3d/折线图.txt").then(({ data }) => {
      setCode(data);
    });
  }, []);
  return (
    <>
      <FirstTitle title="Echarts" />
      <Description
        info={
          <>
            导入echarts
            <p style={{ width: "100%" }}>import * as echarts from "echarts";</p>
            <br />
            <p style={{ width: "100%" }}>import "echarts-gl";</p>
          </>
        }
      ></Description>

      <SubTitle title="3d折线图 效果" />
      <EffectContainer
        effect={
          <div ref={chartRef} style={{ width: "100%", height: "400px" }}></div>
        }
        code={<Code content={code}></Code>}
      ></EffectContainer>
    </>
  );
};
